import React, {forwardRef, useImperativeHandle, useState} from 'react';
import {Form, Input, Modal, Select} from 'antd';
import {addTask} from '../../api/modules/task'
import {Todo} from "./assets";
import useImmer from "../../hooks/useImmer";

const App = (props:any,ref:any) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm();
    const [title,setTitle]  = useImmer('新建')
    const showModal = (data:Todo) => {
        if(!!data){
        form.setFieldsValue(data)
            setTitle(draft => {
                draft = '编辑'
            })
        }

        setIsModalOpen(true);
    };
    useImperativeHandle(ref,()=>{
        return {
            showModal
        }
    })
    const handleOk = async() => {
        console.log('value===>',form.getFieldsValue())
        const params = form.getFieldsValue()
       const {data} =  await addTask(params)
        console.log('data====>',data)
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <>
            <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    form={form}
                >
                    <Form.Item label="名称" name="taskName">
                        <Input />
                    </Form.Item>
                    <Form.Item label="状态" name="taskStatus">
                        <Select>
                            <Select.Option value="1">DONE</Select.Option>
                            <Select.Option value="2">PENDING</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="内容" name="taskContent">
                        <Input.TextArea></Input.TextArea>
                    </Form.Item>

                </Form>
            </Modal>
        </>
    );
};

export default forwardRef(App);
